<template>
  <div class="wrapper-fixed">
    <div class="action-bar-wrapper">
      <el-col :span="24" class="action-bar">
        <el-input v-model="searchText" clearable placeholder="用户昵称或手机号" style="width:300px"></el-input>
        <el-select v-model="searchOption" clearable placeholder="认证状态" style="margin:0 20px;">
          <el-option
            v-for="item in searchOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" size="medium" @click="search">检索</el-button>
        <el-button type="primary" size="medium" @click="toExpertEdit('')">添加</el-button>
      </el-col>
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      v-loading="tableLoadingShow"
      element-loading-text="拼命加载中"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="头像"
        width="100">
        <template slot-scope="scope">
          <div>
            <img :src="scope.row.photo_url" alt=""
                 style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="realname"
        label="姓名"
        width="100">
        <template slot-scope="scope">
          <div @click.stop="showExpertDetail(scope.row.id)" style="cursor:pointer;color:#409EFF">
            {{scope.row.realname}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系方式"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="擅长领域"
        show-overflow-tooltip
        width="120">
        <template slot-scope="scope">
          <div @click.stop="showGoodAt(scope.row)">
            <div
              style="cursor:pointer;color:#409EFF;whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis;width:100%;">
              {{scope.row.strengths}}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="专家标签"
        width="100">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showLicense(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="address"
        label="城市"
        width="160"
      >
        <template slot-scope="scope">
          <div>
            {{scope.row.province}}{{scope.row.city}}{{scope.row.area}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="status_name"
        label="认证状态"

        width="100"
      >
        <template slot-scope="scope">
          <div>
            <el-tag type="success" v-if="scope.row.is_auth==1">正常</el-tag>
            <el-tag type="info" v-else>注销</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        show-overflow-tooltip
        label="提交申请时间"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        width="80"
      >
      </el-table-column>

      <el-table-column label="操作" width='300'>
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="toOfficialComment(scope.row.id)">官方点评</el-button>
          <el-button type="primary" size="mini" @click="toExpertEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini" @click="deleteExpert(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->

    <!-- 个人信息 -->
    <el-dialog title="专家详情" :visible.sync="expertDetailVisible" @close="initData">
      <el-form :label-position="'left'" label-width="150px">
        <el-form-item label="logo">
          <div><img :src="expertDetail.photo_url" alt=""
                    style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>
        </el-form-item>
        <el-form-item label="姓名">
          <div>{{expertDetail.realname}}</div>
        </el-form-item>
        <el-form-item label="手机">
          <div>{{expertDetail.phone}}</div>
        </el-form-item>
        <el-form-item label="所在单位">
          <div>{{expertDetail.unit_name}}</div>
        </el-form-item>

        <el-form-item label="职称">
          <div>{{expertDetail.position}}</div>
        </el-form-item>
        <el-form-item label="擅长领域">
          <div>{{expertDetail.strengths}}</div>
        </el-form-item>
        <el-form-item label="专家标签">
          <div class="tag-wrapper">
            <span v-for="(item,index) of expertDetail.expert_label" :key="index">{{item}}</span>
          </div>
        </el-form-item>
        <el-form-item label="城市">
          <div>{{expertDetail.province}}{{expertDetail.city}}{{expertDetail.area}}{{expertDetail.address}}</div>
        </el-form-item>


        <el-form-item label="资质证明">
          <div>
            <img style="width:150px;height:150px;objectFit:cover;margin:10px" :src="item.img_url" alt=""
                 v-for="(item,index) of expertDetail.expert_qualification_img" :key="index">
          </div>
        </el-form-item>
        <el-form-item label="提交申请时间">
          <div>{{expertDetail.created_at}}</div>
        </el-form-item>
        <el-form-item label="审核时间">
          <div>{{expertDetail.auth_time}}</div>
        </el-form-item>
        <el-form-item label="审核状态">
          <div>
            <el-tag type="success" v-show="expertDetail.is_auth==1">正常</el-tag>
            <el-tag type="info" v-show="expertDetail.is_auth==3">注销</el-tag>
          </div>
        </el-form-item>


      </el-form>
    </el-dialog>
    <!-- 个人信息end -->

    <!-- 擅长领域 -->
    <el-dialog title="擅长领域" :visible.sync="goodAtVisible" @close="initData">
      <div>{{strengths}}</div>
    </el-dialog>
    <!-- 擅长领域end -->

    <!-- 专家标签 -->
    <el-dialog title="专家标签" :visible.sync="licenseVisible" @close="initData">
      <div class="tag-wrapper">
        <span v-for="(item,index) of tagList" :key="index">{{item}}</span>
      </div>
    </el-dialog>
    <!-- 专家标签end -->
  </div>
</template>

<script>
  export default {
    name: "expert_list",
    data(){
      return{
        licenseVisible: false,
        expertDetailVisible: false,//查看个性签名弹窗状态
        goodAtVisible: false,
        expertTagVisible: false,

        searchText: '',
        userAuthId: '',//选中的用户id

        searchOption: '',//头部筛选的认证状态
        searchOptions: [
          {label: '全部', value: -1},
          {label: '正常', value: 1},
          {label: '注销', value: 3}

        ],
        expertDetail: {},
        tagList: '',
        strengths: '',
        tableData: [{}],
        page: 1,
        totalPage: 0,
        tableLoadingShow: false
      }
    },
    watch: {},
    methods: {
      search() {
        this.tableLoadingShow = true;
        this.page = 1;
        this.getExpertsList()
      },

      async getExpertsList() {
        //获取会员列表
        let params = {
          page: this.page,
          limit: 16,
          keyword: this.searchText,
          is_auth: this.searchOption == -1 ? '' : this.searchOption
        }
        let res = await this.$api.getExpertsList(
          params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
        }
        this.tableLoadingShow = false;
      },
      showLicense(scope) {
        //显示在职证明
        this.tagList = scope.expert_label
        this.licenseVisible = true;
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getExpertsList();
      },
      async deleteExpert(id) {
        let judge = null;
        let tit = '删除该专家信息?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.delExpertHandle(id)
        }
        console.log(judge)
      },
      async delExpertHandle(id) {
        let res = await this.$api.delExpert({id: id})
        if (res.data.level == 'success') {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.getExpertsList();
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      },
      async showExpertDetail(id) {
        //显示专家详情
        let res = await this.$api.getExpertDetail({id: id});
        if (res.data.level == 'success') {
          this.expertDetail = res.data.data;
          this.expertDetailVisible = true
        } else {
          this.$message.error(res.data.message)
        }

      },
      showGoodAt(scope) {
        //显示擅长领域
        this.strengths = scope.strengths
        this.goodAtVisible = true;
      },
      showExpertTag() {
        //显示专家标签
        this.expertTagVisible = true;
      },
      toOfficialComment(id) {
        this.$router.push({name: 'Expert_comment', query: {id: id}})
      },
      toExpertEdit(id) {
        //编辑
        this.$router.push({name: 'Expert_editor', query: {id: id}})
      },
      initData() {

      },

    },
    mounted() {
      this.getExpertsList()
    },
  }
</script>

<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .executorList {
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }


  .tag-wrapper {
    span {
      padding: 20px
    }
  }
</style>
